/* 1. 顶部区域 */
#div {
    margin: 0 auto;
    width: 960px;
    height: 50px;
    padding-top: 20px;
     overflow: hidden;    /*这里子元素设置float漂浮定位后，父元素设置overflow:hidden来清除子元素float产生的浮动*/
} 

/* 给所有控件默认内边距外边距 */
* {
    margin: 0;
    padding: 0;
}

/* 1.1 当当网logo图片 */
#logo {
    float: left;
    position: relative;   /*父元素和子元素最好依次交替设置 relative、absolute*/
}

/* 1.2顶部右侧区域 */
#toprightArea {
    float: right;
    position: relative;
    padding-top: 15px;
}

/* 1.2.1绿边框小列表 ul */
.toprightlist {
    border: 2px solid #c7e8df;
    width: 280px;
    height: 30px;
    overflow: hidden;
}

/* 1.2.1.1 ul列表中的元素 */
.topright {
    float: left; /*漂浮定位，这里是为了变成横向*/
    width: 70px;
    list-style-type: none;
    background-color: #ebfef9;
    text-align: center;
    font-size: small;
    color: #707070;
    line-height: 30px;
}

/* 1.2.2 3折疯抢，小角标 */
#iconcount {
    position: absolute;   /*绝对定位挪到绿框小列表的上面*/
    top: 2px;
    left: 20px;
}

/* 2. 分类条区域 */
#selectarea {
    margin: 5px auto;   /*居中显示，第一个值是上下边距，第二个值是左右，设为auto会自动居中*/
    width: 960px;
    overflow: hidden;
    background-image: url("image/menuBg.jpg");
}

/* 2.1分类条ul */
#selectbar {
    overflow: hidden;
}

/* 2.1.* 分类条的每个分类标签 */
.selectli {
    float: left;
    width: calc(960px/17.0);   /*表达式计算需要calc（）*/
    list-style-type: none;
    text-align: center;
    color: white;
    line-height: 35px;
}

/* 3. banner img*/
#bannerarea {
    margin: 10px auto;
    width: 960px;
}

/* 4. 主内容区域 */
#maincontent {
    margin: 10px auto;
    width: 960px;
    height: 400px;
    border: 1px solid #cae4a6;
    position: relative;
}

/* 4.1 图片 图书畅销榜 */
#bookFlag {
    position: absolute;
    top: 20px;
    left: -12px;
}

/* 4.2 第一本书img */
#firstbook {
    position: absolute;
    top: 90px;
    left: 15px;
}

/* 4.3 第一本书的排名小图片 */
#firstrank {
    position: absolute;
    top: 85px;
    left: 35px;
}

/* 4.4 第一本书的内容区 */
#firstbookcontent {
    position: absolute;
    top: 90px;
    left: 260px;
}

/* 所有标题类文字 */
.booktitle {
    color: #295aa6;
    font-size: 16px;
}

/* 所有普通文字 */
.text {
    color: black;
    font-size: 14px;
    padding-top: 5px;
}

/* 所有价格类文字 */
.price {
    color: #791f28;
    font-size: 14px;
    padding-top: 5px;
}

/* 所有打折类文字 */
.sale {
    color: #619988;
    font-size: 14px;
    padding-top: 5px;
}

/* 4.4.1第一本书的详细介绍文字 */
#detailtext {
    width: 280px;
}

/* 4.5 第二本书 */
#secondbook {
    position: absolute;
    top: 90px;
    left: 560px;
}

/* 4.7 第二本书角标 */
#secondrank {
    position: absolute;
    top: 80px;
    left: 565px;
}

/* 4.8第三本书 */
#thirdbook {
    position: absolute;
    top: 225px;
    left: 560px;
}

/* 4.9第三本书角标 */
#thirdrank {
    position: absolute;
    top: 215px;
    left: 565px;
}

/* 4.10 第二本书的内容区 */
#secondbookcontent {
    position: absolute;
    top: 90px;
    left: 665px;
    padding-right: 20px;
}

/* 4.11 第三本书内容区 */
#thirdbookcontent {
    position: absolute;
    top: 225px;
    left: 665px;
    padding-right: 20px;
}

/* 5. 底部文字信息区 */
#bottominfo {
    margin: auto;
    position: relative;
    width: 960px;
}

/* 所有底部描述文字 */
.bottomtext {
    margin: auto;
    color: #797979;
    font-size: 14px;
    display: inline-block;    /*将元素改为块元素*/
    vertical-align: middle
}

/* 5.1底部p标签 */
#bottomp {
    text-align: center;
}
/* 5.2 底部图片 */
#validate {
    display: inline-block;      /*将元素改为块元素*/
    vertical-align: middle
}